<script setup>
import {useRoute} from 'vue-router'
import {ref, inject} from 'vue'
import axios from 'axios'
import { VueDraggable } from 'vue-draggable-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import { Delete, Edit} from '@element-plus/icons-vue'

const route=useRoute()
const path_list=inject('path_list')
path_list.value=route.matched

/*
const data=ref([
  {
    "id" : 5,
    "title" : "组织设置规范",
    "level2s" : [
      {
        "id" : 1,
        "title" : "机关党支部设置",
        "level1_id" : 5,
        "level3s" : [
          {
            "id" : 1,
            "title" : "凡是有正式党员3人以上的，都应当单独成立党支部；正式党员不足3人的，就近就便与其他部门联合建立党支部；党支部党员人数一般不超过50人。党员人数在20人以上的党支部，一般应当划分若干党小组。未按规定设置的扣5分。",
            "score" : 0,
            "score_max" : 5,
            "level2_id" : 1
          }
        ]
      }
    ]
  },
  {
    "id" : 6,
    "title" : "班子建设规范",
    "level2s" : [
    {
        "id" : 2,
        "title" : "严格按期换届选举",
        "level1_id" : 6,
        "level3s" : [
          {
            "id" : 2,
            "title" : "支委会任期届满进行换届选举。未按期按程序进行选举的扣1分。",
            "score" : 0,
            "score_max" : 1,
            "level2_id" : 2
          }
        ]
      },
      {
        "id" : 3,
        "title" : "支委会班子届中补选",
        "level1_id" : 6,
        "level3s" : [
          {
            "id" : 3,
            "title" : "支委会任期届中，党支部书记、副书记、委员出现空缺，应当及时进行补选。支部书记空缺6个月以上、其他支委人员空缺3个月以上的，按人次扣0.5分。",
            "score" : 0,
            "score_max" : 1,
            "level2_id" : 3
          }
        ]
      },
      {
        "id" : 4,
        "title" : "支委会自身建设",
        "level1_id" : 6,
        "level3s" : [
          {
            "id" : 4,
            "title" : "加强学习型支部建设，开展“每人每月读一本书活动“。未开展的每月扣0.2分。",
            "score" : 0,
            "score_max" : 2,
            "level2_id" : 4
          },
          {
            "id" : 5,
            "title" : "充分发挥支委会集体领导作用，加强对党支部日常工作的领导和管理，按期向党支部党员大会和上级党组织报告工作。未开展的扣1分。",
            "score" : 0,
            "score_max" : 1,
            "level2_id" : 4
          }
        ]
      }
    ]
  }
])
*/
const data=ref([])
axios.get('/api/level1').then(res=>{
  data.value=res.data
}).catch(err=>{
  console.error('从后台获取数据失败！')
  console.error(err)
})

const dialog_level1_visiable=ref(false)
const dialog_level2_visiable=ref(false)
const dialog_level3_visiable=ref(false)
const level1_title=ref('')
function handleAddLevel1(){
  if(level1_title.value==''){
    ElMessage.warning("请输入指标名！")
    return
  }
  axios.post('/api/level1',{
    title:level1_title.value
  }).then(res=>{
    data.value.push(res.data)
    dialog_level1_visiable.value=false
  }).catch(err=>{
    console.error("后台添加一级指标失败！")
    console.error(err)
  })
}
var level1_id=0
const level2_title=ref('')
function handleAddLevel2(){
  if(level2_title.value==''){
    ElMessage.warning("请输入指标名！")
    return
  }
  axios.post('/api/level2',{
    title:level2_title.value,
    level1_id:level1_id
  }).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    if(level1.level2s==null) level1.level2s=[]
    level1.level2s.push({id:res.data.id,title:level2_title.value})
    dialog_level2_visiable.value=false
  }).catch(err=>{
    console.error('后台添加二级指标失败！')
    console.error(err)
  })
}
var level2_id=0
const level3_title=ref('')
const level3_score_max=ref(0)
function handleAddLevel3(){
  if(level3_title.value==''){
    ElMessage.warning("请输入评价细则！")
    return
  }
  if(level3_score_max.value==''||!Number(level3_score_max.value)>0){
    ElMessage.warning("请输入正确的分值！")
    return
  }
  axios.post('/api/level3',{
    title:level3_title.value,
    level2_id:level2_id,
    score_max:level3_score_max.value
  }).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    var level2=level1.level2s.find((item,index)=>{return item.id==level2_id})
    if(level2.level3s==null) level2.level3s=[]
    level2.level3s.push({id:res.data.id,title:level3_title.value,score_max:level3_score_max.value})
    dialog_level3_visiable.value=false
  }).catch(err=>{
    console.error('后台添加评价细则失败！')
    console.error(err)
  })
}
function handleDelLevel1(id){
  axios.delete(`/api/level1/${id}`).then(res=>{
    var index=data.value.findIndex((item,index)=>{return item.id==id})
    data.value.splice(index,1)
    ElMessage.info('删除一级指标成功！')
  }).catch(err=>{
    console.error("删除一级指标失败！")
    console.error(err)
  })
}
function handleDelLevel2(level1_id,level2_id){
  axios.delete(`/api/level2/${level2_id}`).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    var index=level1.level2s.findIndex((item,index)=>{return item.id==level2_id})
    level1.level2s.splice(index,1)
    ElMessage.info('删除二级指标成功！')
  }).catch(err=>{
    console.error("删除二级指标失败！")
    console.error(err)
  })
}
function handleDelLevel3(level1_id,level2_id,level3_id){
  axios.delete(`/api/level3/${level3_id}`).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    var level2=level1.level2s.find((item,index)=>{return item.id==level2_id})
    var index=level2.level3s.findIndex((item,index)=>{return item.id==level3_id})
    level2.level3s.splice(index,1)
    ElMessage.info("删除三级指标成功！")
  }).catch(err=>{
    console.error("删除三级指标失败！")
    console.error(err)
  })
}
const dialog_level1_update_visiable=ref(false)
function handleUpdateLevel1(){
  if(level1_title.value==''){
    ElMessage.warning("请输入指标名！")
    return
  }
  axios.put(`/api/level1/${level1_id}`,{
    title:level1_title.value
  }).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    level1.title=level1_title.value
    dialog_level1_update_visiable.value=false
  }).catch(err=>{
    console.error("后台修改一级指标失败！")
    console.error(err)
  })
}
const dialog_level2_update_visiable=ref(false)
function handleUpdateLevel2(){
  if(level2_title.value==''){
    ElMessage.warning("请输入指标名！")
    return
  }
  axios.put(`/api/level2/${level2_id}`,{
    title:level2_title.value
  }).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    var level2=level1.level2s.find((item,index)=>{return item.id==level2_id})
    level2.title=level2_title.value
    dialog_level2_update_visiable.value=false
  }).catch(err=>{
    console.error("后台修改二级指标失败！")
    console.error(err)
  })
}
const dialog_level3_update_visiable=ref(false)
var level3_id=0
function handleUpdateLevel3(){
  if(level3_title.value==''){
    ElMessage.warning("请输入评价细则！")
    return
  }
  if(level3_score_max.value==''||!Number(level3_score_max.value)>0){
    ElMessage.warning("请输入正确的分值！")
    return
  }
  axios.put(`/api/level3/${level3_id}`,{
    title:level3_title.value,
    score_max:level3_score_max.value
  }).then(res=>{
    var level1=data.value.find((item,index)=>{return item.id==level1_id})
    var level2=level1.level2s.find((item,index)=>{return item.id==level2_id})
    var level3=level2.level3s.find((item,index)=>{return item.id==level3_id})
    level3.title=level3_title.value
    level3.score_max=level3_score_max.value
    dialog_level3_update_visiable.value=false
  }).catch(err=>{
    console.error("后台修改评价细则失败！")
    console.error(err)
  })
}
function handleUpdateLevel1Index(e,data){
  e.stopPropagation()
  var old_index=e.oldIndex
  var new_index=e.newIndex
  var small_index=old_index>new_index?new_index:old_index
  var big_index=old_index>new_index?old_index:new_index
  axios.put('/api/level1/index',{
    old_index:old_index,
    new_index:new_index
  }).then(res=>{
    ElMessage.success('顺序调整成功！')  
    data[small_index].index=data[small_index+1].index
    for(var i=small_index+1;i<=big_index;i++){
      data[i].index=data[i].index+1
    }
  }).catch(err=>{
    alert('顺序调整失败！')
    location.reload()
  })
}
function handleUpdateLevel2Index(e,level1){
  e.stopPropagation()
  var old_index=e.oldIndex
  var new_index=e.newIndex
  var small_index=old_index>new_index?new_index:old_index
  var big_index=old_index>new_index?old_index:new_index
  axios.put('/api/level2/index',{
    level1_id:level1.id,
    old_index:old_index,
    new_index:new_index
  }).then(res=>{
    ElMessage.success('顺序调整成功！')  
    level1.level2s[small_index].index=level1.level2s[small_index+1].index
    for(var i=small_index+1;i<=big_index;i++){
      level1.level2s[i].index=level1.level2s[i].index+1
    }
  }).catch(err=>{
    alert('顺序调整失败！')
    location.reload()
  })
}
function handleUpdateLevel3Index(e,level2){
  e.stopPropagation()
  var old_index=e.oldIndex
  var new_index=e.newIndex
  var small_index=old_index>new_index?new_index:old_index
  var big_index=old_index>new_index?old_index:new_index
  axios.put('/api/level3/index',{
    level2_id:level2.id,
    old_index:old_index,
    new_index:new_index
  }).then(res=>{
    ElMessage.success('顺序调整成功！')  
    level2.level3s[small_index].index=level2.level3s[small_index+1].index
    for(var i=small_index+1;i<=big_index;i++){
      level2.level3s[i].index=level2.level3s[i].index+1
    }
  }).catch(err=>{
    alert('顺序调整失败！')
    location.reload()
  })
}
</script>
<template>
<el-dialog v-model="dialog_level1_visiable" title="添加一级指标" width="70%">
  <div style="width:100%; display:flex; align-items: center;">
    <span style="width:70px; flex-shrink:false;">指标名：</span>
    <el-input v-model="level1_title" style="margin-left:10px; width:100%;"/>
  </div>
  <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog_level1_visiable = false">取消</el-button>
        <el-button type="primary" @click="handleAddLevel1()">确定</el-button>
      </div>
    </template>
</el-dialog>
<el-dialog v-model="dialog_level2_visiable" title="添加二级指标" width="70%">
  <div style="width:100%; display:flex; align-items: center;">
    <span style="width:70px; flex-shrink:false;">指标名：</span>
    <el-input v-model="level2_title" style="margin-left:10px; width:100%;"/>
  </div>
  <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog_level2_visiable = false">取消</el-button>
        <el-button type="primary" @click="handleAddLevel2()">确定</el-button>
      </div>
    </template>
</el-dialog>
<el-dialog v-model="dialog_level3_visiable" title="添加评价细则" width="70%">
  <div style="width:100%; display:flex; align-items: center;">
    <span style="width:40px; flex-shrink:false;">评价细则</span>
    <el-input v-model="level3_title" type="textarea" :autosize="{minRows:2,maxRows:4}" style="margin-left:10px; width:100%;"/>
  </div>
  <div style="width:100%; display:flex; align-items: center; margin-top:10px;">
    <span style="width:40px; flex-shrink:false;">分值</span>
    <el-input v-model="level3_score_max" style="margin-left:10px; width:100%;"/>
  </div>
  <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog_level3_visiable = false">取消</el-button>
        <el-button type="primary" @click="handleAddLevel3()">确定</el-button>
      </div>
    </template>
</el-dialog>

<el-dialog v-model="dialog_level1_update_visiable" title="更新一级指标" width="70%">
  <div style="width:100%; display:flex; align-items: center;">
    <span style="width:70px; flex-shrink:false;">指标名：</span>
    <el-input v-model="level1_title" style="margin-left:10px; width:100%;"/>
  </div>
  <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog_level1_update_visiable = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateLevel1()">确定</el-button>
      </div>
    </template>
</el-dialog>
<el-dialog v-model="dialog_level2_update_visiable" title="更新二级指标" width="70%">
  <div style="width:100%; display:flex; align-items: center;">
    <span style="width:70px; flex-shrink:false;">指标名：</span>
    <el-input v-model="level2_title" style="margin-left:10px; width:100%;"/>
  </div>
  <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog_level2_update_visiable = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateLevel2()">确定</el-button>
      </div>
    </template>
</el-dialog>
<el-dialog v-model="dialog_level3_update_visiable" title="更新评价细则" width="70%">
  <div style="width:100%; display:flex; align-items: center;">
    <span style="width:40px; flex-shrink:false;">评价细则</span>
    <el-input v-model="level3_title" type="textarea" :autosize="{minRows:2,maxRows:4}" style="margin-left:10px; width:100%;"/>
  </div>
  <div style="width:100%; display:flex; align-items: center; margin-top:10px;">
    <span style="width:40px; flex-shrink:false;">分值</span>
    <el-input v-model="level3_score_max" style="margin-left:10px; width:100%;"/>
  </div>
  <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog_level3_update_visiable = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateLevel3()">确定</el-button>
      </div>
    </template>
</el-dialog>
<el-collapse class="collapse">
  <VueDraggable v-model="data" @update="handleUpdateLevel1Index($event,data)">
    <el-collapse-item v-for="level1 in data" :name="level1.id">
        <template #title>
            <div class="align-items">
                <el-button type="danger" :icon="Delete" size="small" @click="e=>{handleDelLevel1(level1.id);e.stopPropagation()}"/>
                <el-button type="primary" :icon="Edit" size="small" @click="e=>{dialog_level1_update_visiable=true; level1_id=level1.id; level1_title=level1.title; e.stopPropagation()}"/>     
                <span class="level1">{{ level1.title }}</span>
            </div>
        </template>
        <el-collapse>
          <VueDraggable v-model="level1.level2s" @update="handleUpdateLevel2Index($event,level1)">
            <el-collapse-item v-for="level2 in level1.level2s" :name="level2.id">
                <template #title>
                    <div class="align-items">
                        <el-button type="danger" :icon="Delete" size="small" @click="e=>{handleDelLevel2(level1.id,level2.id); e.stopPropagation();}"/>
                        <el-button type="primary" :icon="Edit" size="small" @click="e=>{dialog_level2_update_visiable=true; level1_id=level1.id; level2_id=level2.id; level2_title=level2.title; e.stopPropagation();}"/>
                        <span class="level2">{{ level2.title }}</span>
                    </div>
                </template>
                <VueDraggable v-model="level2.level3s" @update="handleUpdateLevel3Index($event,level2)">
                  <div v-for="level3 in level2.level3s">
                    <div style="margin-bottom:5px; display:flex; align-items:center;">
                        <div style="width:84px; flex-shrink:0;">
                            <el-button type="danger" :icon="Delete" size="small" @click="e=>{handleDelLevel3(level1.id,level2.id,level3.id); e.stopPropagation();}"/>
                            <el-button type="primary" :icon="Edit" size="small" @click="e=>{dialog_level3_update_visiable=true; level1_id=level1.id; level2_id=level2.id; level3_id=level3.id; level3_title=level3.title; level3_score_max=level3.score_max; e.stopPropagation();}"/>
                        </div>
                        <span class="level3">{{ level3.title }}（{{ level3.score_max }}分）</span>
                    </div>
                  </div>
                </VueDraggable>
                <div style="display:flex; width:100%; justify-content: center;">
                    <el-button round style="background-color:orangered; size:small; font-size:x-small; padding:0 10px; color:white;" @click="dialog_level3_visiable=true; level1_id=level1.id; level2_id=level2.id; level3_title=''; level3_score_max=0;">添加三级指标</el-button>
                </div>
            </el-collapse-item>
          </VueDraggable>
          <div style="display:flex; width:100%; justify-content: center;">
              <el-button round style="background-color:green; size:small; font-size:small; padding:0 12px; color:white;" @click="dialog_level2_visiable=true; level1_id=level1.id; level2_title=''">添加二级指标</el-button>
          </div>
        </el-collapse>
    </el-collapse-item>
  </VueDraggable>
</el-collapse>
<el-button round style="background-color: black; font-size:medium; padding:0 14px; color:white;" @click="dialog_level1_visiable=true; level1_title=''">添加一级指标</el-button>
</template>
<style lang="scss" scoped>
.collapse{
    width:100%;
    padding:20px;
    .align-items{
        width:100%;
        display:flex;
        align-items: center;
    }
    .level1{
        font-size:large;
        margin-left:10px;
    }
    .level2{
        font-size:medium;
        color:green;
        margin-left:10px;
    }
    .level3{
        font-size:small;
        color:orangered;
        margin-left:10px;
    }
}
</style>